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المقدمهة 


في الفصلين الدراسيين السابقين تعرضنا لأساسيات البرمجة بلغة الجافا (الفصل الدراسي 
الأول) » وللبرمجة كائنية المنحي ع¡" "اعام oriented‏ ectزطo(الفصل‏ الدراسي 
القاني): 

في هذا الكتاب سنتعرض للجزء الاهم من لغة الجافا وهو برمجة واجهات المستخدم . وسنقسم 
الكتاب الي اربعة اجزاء تصدر علي التوالي .... 


-٠ المطلوبات‎ 


- لدراسة هذا الجزء من الكتاب لابد من دراسة الإصناف المجردة ( اجء†sءاa‏ 
“ئاع) دراسة تامة . 


الفصل الاول 


مقدمة الي برمجة واجهات 
ااستا 


* في كل البرامج السابقة استخدمنا مامومهء أو ع٥٣‏ هنامJ0‏ في ادخال البيانات او 
اخراج المخرجات » ولكن هذه الطرق بها مشكلة الحدود الضيقة في التعامل .... مثلا اذا 
اردنا ان نقرأً 20 عدد من المستخدم عن طریق ٥ ۸۴۵٣٥‏ اام( فأننا سنحتاج لإظهار 
عدد 20 ع٥|u†0iaمnاسhoك‏ وذلك غير فعال في معظم البرامج ويسبب ملل للمستخدم. 


* نقوم ببرمجة وجهات المستخدم عن طریق انشاء كائنات (ءاءعزطه) من الاصناف 
)classes(‏ التالية : Button , لLabeا , rextFiled , JCheckBox‏ والتي توفر عدد 
دوال تھئية (ئ٣اماعں٣†و"هء)‏ والتي يمكن إستخدامها لانشاء الكائنات. 


: امثلة علي انشاء كائنات من الانواع اعلاه‎ 
JButton jb = new JButton (“OK”); 
JLabel jl = new JLabel(“Enter Your name here: ”); 
JCheckBox jbo = new JCheckBox (“BOLD”); 
: الشكل الذي تظهر عليه واجهة المستخدم بعد البرمجة‎ 


Bulton Label Texl Field Check Bor Radio Button 


j Display GUI Components | O HA 
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Swing vs AWT 
ا ا كن الان من تون ها الحرف*؟‎ ١ ترىئ انما ات اة عل حرف‎ 
الاجابة علي هذا السؤال ان هنالك اصناف ءعووواع من دون حرف ل والسبب في ذلك انه في الجافا‎ 
. javax.swing و‎ java.awt نستخدم فئتين لبرمجة واجهة المستخدم وهم‎ 
-: ملحوظة مهمة‎ 


سنستخدم كلمة فئة او مكتبة كتعريب لكلمة معه)عءهم الانجليزية في كل فصول الكتاب › كما 
سنستخدم كلمة صنف كتعريب لكلمة sءهاع‏ » وكلمة كائن كتعريب لكلمة اءعزطه . 


* عندما قدمت لغة الجافا برمجة واجهات المستخدم لأول مرة كانت كل الاصناف موجودة في مكتبة 
او فئة تسمي سه وهذه الفئة تقوم بضبط اعدادت البرنامج تلقائيا حسب المنصة التي يتم تشغيل 
البرنامج عليها › هذه الإصناف الموجودة في هذه الفئة تنفع في بناء واجهات مستخدم بسيطة 
ولكن لا تجدي نفعا في بناء واجهات مستخدم محترفة ومتميزة. 


* مع ظهور الذ لنسخة الثانية من الجافا تم استبدال فئة سه بفئة اكثر تميز وكفاءة هي فئة swing‏ 
اتی کک ع 2 الات من دوا ا ك ام ا ت اة را عه 


* يتم الاشارة الي فة weight compمonentsب swig‏ tطigا‏ او المكونات الخفيفة (وذلك لانها 
لا تعتمد علي منصة التشغيل ) < والاشارة الي أ awt‏ ڊ heavy weight components‏ 
او المكونات الثقيلة ( وذلك لانها تعتمد وتتعامل مع منصة التشغيل). 


* ومن اجل التفريق بين اصناف فة سه واصناف فة عم سء يتم اضافة اللاحقة ل قبل اسم كل 


صنف من اصناف فة عم أW؟‏ . 


* من الافضل التعرد على البرمجة بواسطة مكتبة او فئة swing‏ (علي الرغم من دعم الجافا 


اناف فة (awt‏ وذلك لأن هده الاصناف هي التي ستبقي . 


The Java GUI API 


GUI Application Program Interface 


- طريقة تصميم وترتيب الا۸۴ الا تعتبر من افضل الامثلة علي استخدام الوراثة والاصناف 
وllوlجlٽ (Interfaces)‏ . 
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Lightweight 


* الرسم اعلاه عبارة عن رسم هيكلي يوضح الاصناف المستخدمة في برمجة واجهات المستخدم. 
والرسم التالي يوضح اصناف فة عاسو 


J Check BoxMenu ltema 


JTMcau ems im Jem | 
E JBMtxn JRaditBu Aone nultemy 
JID gEke Baim JCheccek Bos n 
س مدد‎ 3 Ee ificur | 
JEdîtor Fane 
J Terora Eerl k E IText Feld ل‎ JPascword Fie kl 
JITest Arana | 
E | J.i ۱ J Carn ber ox | JPanel | JOpuan Pame | 1SermBar | JSliler | 
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Tima Eka JMeRi Bar [| JPopaup™Memwa | JFileChooser | JCal Chooser | J Tool Ti [ 
JTree ۱ TT | JFTablceHeasksr [| Jlmse raal Framae | JPropgressBar [| JSginaner | 


SC arr atten 


* أصذاف البرمجة الرسومية تنقم الي ثلاثة اقساء: 


Contianer Component 
Classes classes 


* 


container classes‏ او اصناف الحاویات مثل :عام م JFrame , J Pane, JA‏ تقوم بأحتواء 
الكائنات الاخري في داخلها . 

helper classes *‏ او الاصناف المساعدة Color , Graphics, Font,Dimension : Jia‏ 
تستخدم بواسطة اصناف الاحتواء كعءءهاع اهأه†ممع او بواسطة اصناف المكونات 

classes‏ onentمmصمc‏ وذلك من اجل رسم ووضع المكونات علي الشاشة. 


component classes *‏ او اصناف المکونات متل : JLabel , JButt0n‏ , extFiledال‏ فهھي 
عبارة عن اصناف فر عية من الصنف e‏ oمJcom‏ . 


ملحوظة مهمة - 

الاصناف J۴ra e‏ و JPanel‏ وlogاDaiلJ‏ و onentمompع J‏ وكل الإصناف الفرعية منها 
موجودة في الفئة javax.swing‏ <<< اما باقي الاإصناف والاصناف الفرعية منها فموجودة في الفئة 
java.awt‏ .. 


Swing Components 
هو الأب لكل الاصناف المتستخدمة في برمجة واجهة المستخدم‎ component الصنف‎ 
هو الاب لكل الاصناف الخفيفة ( عرأسء‎ J٤٥ في لغة الجافا .... بينما الصنف †"ع”ممص‎ 
. (classes 
عبارة عن صنف مجرد ولایمکن انشاء کائنات منه ولکن بدلا من‎ J٤عهصمم‫”‎ ٥٣ الصنف‎ 
. J۴٣ه ذلك انشاء الكائنات من الاصناف الفرعية منه مثل مص‎ 


JButton But = new JButton (“OK”); 


Container Classes 


* اصناف المحتوي هي عبارة عن اصناف تستخدم لاحتواء المكونات < , Window , Panel‏ 
Frame , Dialog‏ , tماممA‏ هي اصناف الاحتواء الخاصة بمكتبة أه. 


* بالنسبة لمكتبة ع سء فأن اصناف الاحتواء هي , Component , Container , JFrame‏ 
JDialog , JApplet , JPanel.‏ 


تفصيل الاصناف -٠‏ 


Container *‏ تستخدم لتجميع المكونات واللوحات والاطارات وتعتبر الابلت من امثلة هذه 
الاصناف. 


x 


مصه٣J۴‏ هو عبارة عن نافذة غير محتواة في نافذة اخري ويستخدم لاحتواء بقية مكونات 
واجهة المستخدم في الجافا. 


SN EE E E O 


* اام مAل‏ هو عبارة عن صنف فرعي من الصنف ءام م۸ ولابد من عمل امتداد منه 
للتعامل معه . 


* امصةJ۴‏ هو عبارة عن حاوية غير مرئية تستخدم لاحتواء مكونات البرمجة ويمكن ان يكون 
متداخلا » ویمکن اضافة لوحة دخل لوحة اخري ۰ ویمکن استخدامها لرسم بعض الاشكال. 


Helper Classes 


* الإصناف المساعدة مثل "۴0 , ٣اه‏ , hicsمaاU‏ ليست اصناف فرعية من 
اlلڀصiزک Component‏ وانما تستخدم لتنسق والتحكم في مظهر الواجهات. 


* األصنف Graphics‏ عبارة عن صنف مجرد ويستخدم في رسم الإشكال البسيطة. 
* الصنف o۲ام٣‏ يستخدم في التحكم في الوان جميع مكونات الواجهات. 
* الصنف ۴٠٣۲‏ يستخدم في تحديد نوع وحجم النص في الواجهات المختلفة . 


* الصنف ۴0n tMetrics‏ یستخدم في الحصول علي خصائص الالوان الخاصة بمكونات 
الواجهه. 


* الصHiۉک Dimension‏ يستخدم في التحكم في طول وعرض مکونات الواجهه. 


* الصنف ۲عع2" ۷a‏ youtها‏ هو عبارة عن ععهf‏ عام¡ يحدد الكائن المنشي منه طريقة 
احتواء المكونات في الحاويات. 


ملحوظة :- 


الاإصناف المساعدة موجودة في فئة java.awt‏ وذلك لان فئة swing‏ لم تستبدل کل اصناف هذه 
الفئة وانما فقط اصناف المكونات وابقت علي باقي اللإاصناف . 


۴4۳٥s الاطارات‎ 


* لكي نتمكن من تصميم واجهة مستخدم لابد من انشاء واحد من اثنين اما إطار او أبلت وذلك 
لاحتواء مكونات الواجهه وفي هذا الكتاب سنتعرض للتعامل مع الإطارات فقط . 


Creating a frame :- 


لكي نقوم بأنشاء اطار نستخدم الصنف "٠‏ ه٣۴(‏ والذي نفصل تكوينه في الشكل التالي : 


+JFrame // constructor 

+JFrame (String Title) // cons with title 

+setSize(int width , int height) // void // to set the size of f 
+setLocation(int x, int y) // set the location of the frame 
+setVisible(Boolean visi) // make the frame visible or not 
+setDefaultCloseOperation(int co) // what happ on close 
+setLocationRelativeTo(component c) // void connect 
component together 


مثال 1: 


انشاء اطار عرضه 400 بکسل وطوله 300 بکسل وغیر مرتبط باي مکون اخر وعند اغلاقه 
يغلق البرنامج فور <« ilgieyنa SUST Scoring System‏ ؟؟؟ 


الحل 


هذا هو الكود الخاص بحل المثال 


import jJavax.swing.*; 


public class MyFrame { 
pPUDLIS. SEAELE vO MATAR (SEELAG TLI! E95) { 
JFrame frame = new JFrame ("SUST Scoring System"); 
frame.setSize (400, 300); 1€ €: 1: 
frame.setLocationRelativeTo (null); N < € 
frame.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE 
frame.setVisible (true); 1 


AOC GO HA GG O E o wa a 
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شرح المثال : 

کش السطر الارل نقوم بعمل استيراد للمكتبة او الفئة javax.swing‏ وعلامة النجمة في العبارة 

تدل علي اننا نريد استيراد كل الاإصناف الموجودة في المكتبة. 

في السطر الخامس نقوم بإنشاء كائن من الصنف م" ه٣۴[‏ ونرسل له القيمة الخاصة 

SUST Scoring System بالعنوان والتي هي‎ 

في السطر السادس نقوم بتحديد ابعاد الاطار ونرسل لها اولا العرض وهو 400 ومن ثم نرسل 

لها الطول وهو 300 

في السطر السابع سنقوم بتحديد ما إذا كان هذا الاطار مرتبط بإطار او مكون اخر من 

المكونات 

في السطر الثامن نحدد العملية التي تحدث عند اغلاق الاطار 

في السطر التاسع نحدد ظهور الاطار من عدمه ونرسل له القيمة true‏ لإظهار الاطار و 
مsاfa‏ لإخفاء الاطار . 


* المثال السابق يو ضح أنا كيفية انشاء إاطار “ ولکن لیس هناك معني لانشاءِ اطار فارع 
لذلك سانضيف مكون جديد عبارة عن زر للموافقة ہ‌o‌butt OK‏ 
البرنامج بعل التعديل - 


import javax.swing.*; 


public class MyFrameWithComponents { 
DPHOLLES EEE VOL MaIBP(SEEIRS TT] AFGS). { 
JFrame frame = new JFrame ("MyFrameWithComponents"™) ; 


JEUEE ON ISEOK 3 hew TEUEEON (OR 
frame.add ( jJbtEOK) ; 


frame.setSize (400, 300); 
frame.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE); 
frame.setLocationRelativeTo (null); nt he 1 
frame.setVisible (true) ; 
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شرح التعديل : 
nەJ8utt‏ ونرسل له النص الذي سيظهر في الزر 
ومن ثم نقوم باضافة الزر الي الاطار عن طريق استخدام الدالة هله وذلك كالاتي : 
Frame_name.add(Button name);‏ 


حيث ان : 


۴rame _name‏ == اسم الاطار 
Button name‏ == اسم الزر 


NS 

لابد من التفريق بين اسم الزر والنص الذي يظهر علي الزر ›» فأسم الزر هو اسم الكائن الذي 
ننشئه »» اما النص الذي يظهر علي الزر فهو النص الذي نرسله الي دالة التهئية عند انشاء 
الكائن. 


Layout Manager bıطختلا مدير‎ 


فى اقلت ارامح المر تة ت وضع اكرات عن طريق رمحا ةة خا رمت اللاك 
حيث يتم تحديد موقع كل مكون بدقة تامة 

ولكن هذا النظام له عيب انه قد لاينفع في بعض الاجهزة. 

* يوفر مدير التخطيط طريقة سهلة لوضع المكونات في الواجهه. 


ملحوظة :- 
توفر الجافا وتدعم وضع المكونات في الواجهه عن طريق البرمجة المتعلقة بالبكسل ولكنها 
غير مستخدمة بصورة كبيرة . 


في لغة الجافا يتم وضع المكونات في حاويات وفي المثال السابق لم نحدد اين يتم وضع الزر 
في داخل الاطار › ولکن مدير التخطيط قام بوضعه في المكان المناسب 

يتم الصنف ۲ععة١ u۷ a‏ مرها واي صنف من هذا النوع يجب ان يعمل اعادة هيكلة للواجهة 
.LayoutManager‏ 


LayoutManager layoutManager = new XLayout (); 
container.setLayout (layoutManager) ; 


حيث × عبارة عن متغير حسب نوع دير التخطيط 
وة باكاة مدر الط ال الحا ن طرق السار اقا 


Flow layout 

مدير التدفق او مرها سه|؟ هو ابسط نوع من مدراء التخطيط وفيه يتم ترتيب المكونات من 
الشمال الي اليمين وبنفس الترتيب الذي تمت اضافتها به »» وعندما يمتلئ سطر يتم البدء 
زالمو اة في سط جذيد ويمكن تيد المكان الذي بن كنع المكرنات فيه عن طريق 
استعمال احدي هذه الثوابت ûllثںڎة g FlowLayout.RIGHT s FlowLayout.LEFT‏ 

.FlowLayout.CENTER 
۴ا٥w ا‎ ayo u† جدول يوضح التفصيل للصنف‎ * 

- Int alignment \\ center or left or right 

- Int hgap \\ horizontal gap 

- Int vgap \\ vertical gap 

+FlowLayout() \\ constructor 

+FlowLayout(int all) \\ cons with alignment 

+FlowLayout(int all, int vgap , int hgap) \\ cons with ali and vgap and hg 


مثال :- 
برنامج يقوم بإضافة ثلاثة لافتات وثلاثة مربعات نص في داخل إطار وتنظيمها عن طريق 
yout‏ اا۴ »» سيتغير ترتيب المكونات اذا غيرت الحجم 
الحل 
الكود الخاص بالبرنامج : 


1 import javax.swing.JLabel; 
import javax.swing.JTextField; 
import javax.swing.JFrame; 
import java.awt.FlowLayout; 


public class ShowFlowLayout extends JFrame { 
public ShowFlowLayout () { 


setLayout (new FlowLayout (FlowLayout.L 


JLabel ("First Name") ); 
JTextField(8)); 

JLabel ("MI")); 
JTextField(1)); 

JLabel ("Last Name") ); 
JTextField(8)); 
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howF'lowLayout frame = new ShowFlowLayout () ; 
rame.setTitle ("ShowFlowLayout") ; 
rame.setLlLocationRelativeTo (null); € 1 1 
rame.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE 
rame.setSize (200, 200); 

rame.setVisible (true); 
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ا TEE‏ الذي قبله . 
فى انشاء الواجهات ١‏ : 

1- انشاء اطار في دالة التهئية وجعله ممتد من الصنف ۳٥‏ ه٣J۴‏ . 

2- يمكن جعل الصنف ممتد اذا احتجنا لاستخدامه في مكان اخر. 

3- اعادة استخدام الصنف الذي کتبناه. 


* من هذه النقطة سنقوم بجعل جمیع الإصناف المستخدمة امتداد للصنف J Fram‏ ونقوم 
بانشاء وبرمجة الواجهه في دالة التهئية الخاصة بالصنف » ويتم استدعاء الدالة في الدالة 
الılulة .main method‏ 

* اذا استبدلنا الارقام في السطر رقم 10 بالارقام 0 و 0 فسوف يتم وضع المكونات خلف 
بعضها البعض من دون فراغات. 

* في نفس السطر السابق قمنا بإنشاء كائن عشوائي من الصنف اuمرةاسه|ا۴.‏ 

* الدالة ٥1ء‏ تستخدم لوضع عنوان للاطار. 


ملحوظة مهمة : 
لاتنسي استخدام الكلمة المحجوزة سwعم‏ عند انشاء كائن من الصنف اay0uاسها۴‏ 
واستخدام الدالة utمرها†هء‏ كالتالي 

setLayout(new FlowLayout()); 


Grid Layout 
هذا النوع من مدراء التخطيط يقوم بترتيب المكونات في شكل مصفوفة من الاعمدة‎ * 
ويتم فيه ترتيب المكونات من الايسر الي الايمن والبدء بالسطر الاول والذي يليه‎ ٠ والصفوف‎ 
. وهكذا » ويتم ترتيب المكونات حسب الترتيب الذي تمت اضافتها به‎ 
: ع٣ توضیح المتغیرات والدوال في صنف ں0 ھا‎ 
- Int rows \\ number of rows in the frame 
- Int columns \\ number of columns in the frame 
- Int hgap \\ the horizontal gap 
- Int vgap \\ the vertical gap 
+ GridLayout() \\ empty constructor 
+ GridLayout(int rows, int columns) \\ constructor with rows and colms 
+ GridLayout(int rows, int columns , int hgap , int vgap) \\ with all const 


ويمكن تحديد عدد الصفوف والاعمدة عند انشاء كائن من الصنف grid layout‏ وهنالك 
بعض القواعد الاساسية في تنظيم الصفوف والاعمدة : 

1- عدد الاعمدة او عدد الصفوف يمكن ان يكون صفر ولكن لا يمكن ان يكون كل من العددين 
صفرا. اذا كان واحدا صفر فالاخر لابد ان يكون رقم موجب غير الصفر . البعد الغير صفري 
يتم تثبيت الرقم الذي تم ادخاله اما البعد الصفري فيتغير بالزيادة عند زيادة مكون وبالنقصان 
عن نقص مکون . 

مثلا ' 

اذا عرفنا كائن من الصنف اںمره| هع يحتوي علي تلاثة اعمدة وصفر عمود »» وكان لدينا 
0 مكونات لوضعها في الاطار فسنجد ان الاطار قد قسم الي اربعة صفوف وتلاثة اعمدة 
وفي کل صف 3 مکونات عد الاخیر فانه یکون فيه مکون واحد. 

2- في حالة ادخال البعدين كا ارقام غير صفرية يتم تثبيت عدد الصفوف ويقوم المخطط 
بحساب عدد الاعمدة تلقائيا. 


مثال :- 
برنامج یستخدم اںمره| لع لانشاء اطار به 3 لافتات و3 مربعات نص 
الحل 
هذا البرنامج هو نفس البرنامج السابق مع تغيير المخطط من اuمرها‏ سها؟ الي هااع 
layout‏ 
import jJavax.swing.JLabel;‏ 
import javax.swing.JTextField;‏ 


import javax.swing.JFrame; 
import java.awt.GridLayout; 


public class ShowGridLayout extends JFrame { 
public ShowGridLayout () { 


setLayout (new GridLlLayout (3, 2, 5, 5)); 


JLabel ("First Name")); 
JTextField(8)); 

JLabel ("MI")); 
JTextField(1)); 

JLabel ("Last Name")); 
JTextField(8)); 
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ShowGridLayout frame = new ShowGridLayout (); 
frame.setTitle ("ShowGridLayout") ; 
frame.setLocationRelativeTo (null); nt he 1 
frame.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE 
frame.setSize (200, 125); 
frame.setVisible (true) ; 


* عند تغيير حجم الاطار لا يتغير ترتيب المكونات كما كان يحدث في اںمرها ۵٣ع‏ وانما 
گن کل اة اة ا ها اور ٠‏ افر اغات شن المكركات: 

* في کل من مخطط اuںم‏ ھا ۴٥W‏ ومخطط اںمر ھا B۵‏ ترتیب اضافة المكونات مهم 
جداا لانه هو الذي يحدد ترتيب المكونات في الاطار او ال مص۳هم؟ . 


Border Layout 
east , west , NOFÎh , هذا النوع من مدراء التخطيط يقوم بتقسيم الشاشة الي خمسة اقسام‎ * 
south , center 
: يتم اضافة المكونات عن طريق استخدام الدالة للج مع تحديد مكان المكون كالتالي‎ * 
Add(component , index); 
: حيث ان »عل | هو عبارة عن ثابت واحد من خمسة ثوابت هي‎ * 
BorderLayout.SOUTH , BroderLayout.CENTER , BorderLayout.NORTH , 
. BorderLayout.WEST , BorderLayout.EAST 
- : Border layout فiص تفصيل الدوال والمتغيرات في‎ * 
- Int hgap 
- Int vgapþ 
+ BorderLayout() 
+ BorderLayout(int hgap , int vgap) 


* المكونات التي يتم اضافتها في شمال وجنوب الاطار يتم عمل تمديد ليها علي امتداد الاطار. 
مثال : 
برنامج يقوم بإضافة 5 ازار بعناوينها حسب الاتجاهات 
الحل 
كود البرنامج : 


import javax.swing.JButton; 
import javax.swing.JFrame; 
import java.awt.BorderLayout; 


public class ShowBorderLayout extends JFrame { 
public ShowBorderLayout () { 


setLayout (new BorderLayout (5, 10)); 


ج 


East"), BorderLlLayout. EAST); 
South"), BorderLayout. SOUTH) ; 
West"), BorderLlLayout.WEST) ; 
North"), BorderLlLayout.NORTH) ; 
'Center"), BorderLlLayout. CENTER) ; 


JButton (" 
JBU LOR (® 
JButton (" 
(2 
۳ 


JButton 
JButton 
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DPUOITE EAE VOI MaIR(SEETAG LN AES). { 
ShowBorderLayout frame = new ShowBorderLayout () ; 
frame.setTitle ("ShowBorderLayout") ; 
frame.setLocationRelativeTo (null); nter the 1 
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE 
Fame. SEESIZe (300, 200) 


frame.setVisible (true) ; 


* هذا البرنامج هو نفس البرنامج السابق مع إستبدال المخطط اںمره|ا لاع بالمخطط 
border layout‏ . 


ملحوظة مهمة :- 
لاحظ الفرق بين دالة لله ل خyouھا‏ 4٣ع‏ ول utاy0ها‏ سا۴ وهي كالتالي : 
Add(component)‏ 
وبين دالة كله ل †uاay0ا‏ ٣0ط‏ وهي كالتالي : 
Add( component , index)‏ 


* الحالة الافتراضية في اuمرها‏ ٣مل۲هط‏ هي الوسط اي ان 


Add( component) 
ls equal vent to == 
Add(component , BorderLayout.CENTER); 


خصانص مدراء التخطيط 
مدراء التخطيط لديهم خصائص تتغير ديناميكيا وهي كالتالي : 
:FlowLayout‏ 
alignment -‏ : وهي لتحديد المكان . 
- مطهع : وهي لتحديد الهامش الافقي 
- مةعط : وهي لتحديد الهامش العمودي 
ااا ك كت ان ع ر ا 


setAlignment 
setVgap 
setHgap 
: Grid Layout 
۷م لعدد الصفوف‎ - 
لعدد الاعمدة‎ columns - 


- مaعh‏ , مجع : لتحديد الهوامش الافقية والعمودية 


: BorderLayout 
. معط , مجع : لتحديد الهوامش الافقية والعمودية‎ - 


The color class 


صنف اللون 
* یمکن التحكم فی الوان المكونات باستخدام الصنف java.awt.color‏ وبما ان الالوان هي 
عبارة عن مزيج من الالوان الاساسية الثلاثة الاحمر والاخضر والازرق والتي يتم تمثيل كل 
امھ ب من درن اکان کنل عل ف غا ودر ج الا یں ن وان العا الي ٤د‏ 
للالوان الخفيفة . هذا النظام بعرف بنظام R68‏ 


* يمكن انشاء لون جديد بإستخدام دالة تهئية كالتالي : 


BUDLIE COLON Er. IRE Gy. ANE OB), 


حيث تشير الاحرف ط,ع, الي شدة الالوان المكونة للون المطلوب .... كمثال : 


COLOE. COLO = hew Color(128; LOO; LOOP; 


ظة مهمة -٠‏ 
المتغيرات الخاصة بشدة الالوان تتدرج قيمتها من 0 الي 255 وعند تمرير قيمة خارج هذا 
lنئحد program will throw the following exception‏ : 


IllegalArgumentExcept ion 


* يمكن استخدام اندالة setForeground(Color c) lll, setBackground(Color c)‏ 
لتحديد لون خلفية المكون المعني ولون المقدمة 
متال :- ٤‏ 
تحديد لون الخلفية والمقدمة لزر في واجهة رسومية ؟؟؟ 
۰ الحل 
JButton jJbtOK = new JButton ();‏ 


jbtOK.setBackground (color) ; 
jJbtOK.setForeground (new Color (100, 1, 1)); 


* يمكن استخدام واحد من الالوان التالية بدلا من كتابة الارقام والالوان هي : 
(black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange,‏ 
pink, red, white, yellow)‏ 
مثال :- 
نفس المثال السابق عن طريق استخدام الالوان بدلا من الارقااام؟؟؟ 
الحل 
فقط نغير في السطر الثالث ليصبح كالتالي : 


jJbtOK.setForeground (Color.red) ; 


Font Class 

صنف اللون 
* يمكن انشاء خط عن طريق الصنف n‏ ava.awt.۴ز‏ ویمکن التحكم ق خطوط المكونات 
عن طريقة الدالة "۴0ء . 
دالة التهئية لصنف اللون هي كالتالي : 


public Font (String name, int style, int size); 
SansSerif, Serif, : ةıllتl قيمة المتغير مهم عبارة عن واحد من القيم‎ * 
. Monospaced, Dialog, or Dialoglnput 
Font .PLAIN (0), Font .BOLD (1), : قيمة المتغير مار†ء عبارة عن واحد من القيم التالية‎ * 


. Font .ITALIC (2), and Font .BOLD+Font . ITALIC (3) 


* اما قيمة المتغير ع2أء فهي عبارة عن اي رقم موجب . 
مثال :- 
انشاء خطين جديدين باستخدام الصنف ۲١٠۴.«ه.ه۷هز‏ واستخدام احدهما في زر في 
الأاحهة 
الحل 


EONE:EOREL 
Foht font2 


= new Font ("SansSerif", Font.BOLD, 16); 
= new Font ("Serif", Font.BOLD + Font.ITALIC, 12); 
JButton jJbtOK = new JButton ("OK"); 

jbtOK.setFont(font1); 


eT 
اذا كان النظام الخاص بالجهاز يدعم انواع من الخطوط غير المذكورة اعلاه فيمكن استخدامها‎ 
. في البرنامج عن طريق انشاء كائن وكتابة نفس اسم الخط المطلووب في خانة الاسم‎ 


اكام اللوبحات كحارنات قرغ 
* لكي نفهم اهمية هذا الموضوع علينا ان نتخيل اننا نريد وضع 10 ازرار ومربع نص في 
اطار ›» فسيتم وضع الازرار في ترتيب صفوف واعمدة حسب مرها لاع اما مربع 
الل فك وه ى فف فطل اها مما تو عى الكل الجمالى لر اتج 
من الب الخضر لى الكل امط ر ت الر تانع ك وخم حم الك ات في ار 
واااحدة فقط . 
* تي ترم الر لات السرم فى الجفا كع اة مير تق لاان الي ذد من اللو حات 
تعتبر كل لوحة منها كحاوية فرعية. 
بول ف اعد ات الر وو ار اي ار ةه ف اة 
الاطار . 
* يمكن انشا اوحة عن طريق ذالة اة اة ٠‏ 
JPanel p = new JPanel () ;‏ 
new JPanel (LayoutManager x)‏ 


حیثٹ ×: عبارة عن نوع من مدراء التخطيط (ارجع لدرس مدراء التخطيط (. 

مثال :- 

اء اوا اعا و ورمن ك اعا زر الها ومن فاضا الال لطر م 
الحل 


JPanel p = new JPanel (); 
p.add (new JButton ("OK") ); 


fE.add(p) 7 


مثال :- 
انشاء واجهة رسومية لبرنامج يحاكي عمل الميكروييف ؟ 
الحل 


| š The Front Yiew of a ictG Framê 


Tirê to bê displayêd hërêë Content panê 
Button : 


ES 2 ن ا‎ Panel p2 


Foûd to bê placêd hêre 


Panel p1 


* شكل الواجهة الرسومية المطلوب برمجتها . 


الكود الخاص بالبرمجة :- 


1 TMpPOEE Javasawl:*; 
import jJavax.swing.*; 


public class TestPanels extends JFrame { 
public TestPanels() { 


JPanel p1 = new JPanel (); 
pl.setLayout (new GridLayout (4, 3)); 


EOE (INE LL = 1}; 1 <= YF 
PEG (new JButton ("" + 1)); 
} 


pl1.add (new JButton("" + 0)); 
pl1.add (new JButton ("Start")); 
p1.add (new JButton ("Stop") ); 


EEE O2 = Ew JEoAMENL (MEN BOCES LEONE NF 

pP2.add (new JTextField("Time to be displayed here"), 
BorderLayout .NORTH) ; 

PpP2.add (p1, BorderLayout.CENTER) ; 


add (p2, BorderLayout.EAST); 
add (new JButton ("Food to be placed here"), BorderLlLayout .CE 
} 


BuGLiIC Statice YO maln (SLEINGL1. AEOS) { 
TestPanels frame = new TestPanels(); 
frame.setTitle ("The Front View of a Microwave Oven"); 
frame.setLocationRelativeTo (null); ente 1€ rame 
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); 
frame.setSize (400, 250); 
frame.setVisible (true); 


} 


1 
* الدالة أuمرها†مء‏ معرفة اصلا في الصنف ۲٥ع"‏ أة†”ه٤.سه.۷aهز‏ وبما ان الصنف 
امصPa‏ صنف فر عي من الصنف ٣٥١۲‏ ه٤٥٤‏ فيمكن استخدام الدالة مره اء لتحديد نوع 
اظ لاض ا اا 
* تم تقسيم الاطار اعلاه الي لوحتين الاولي للازرار والثانية لاحتواء مربع النص الاول 
واللوحة الاولي ..... ويتم وضع مربع النص الثاني في منتصف الاطار. 
* الاسطر 22-21 تقوم باضافة مربع ادخال لاستقبال القيم من المستخدم واضافتها الي اللوحة 
الثانبة 


ملحوظة مهمة :- 

الصنف "٥۲‏ همه هو الصنف الاب لكل اصناف *.ع١أسء.×۷aهز‏ وكل الدوال الموجودة 
فيه يتم توريتها الي الاصناف الفرعية منها . 

لذلك (نظريا) يمكن استخدام الازرار كحاويات فرعية ولكن لاسباب (عملية ) لا يفضل 
اتا ررر ا رسن 


خصائص مشتركة بين مكونات الواجهات الرسومية في الجافا 
Common Features of Swing GUI Components‏ 


* لقد استخدمنا عدد من مكونات الواجهات الرسومية في الجافا مثل , اعم همل , ٠۴۳ل‏ 
JtextField , label‏ , uttonطل‏ ... وسنقوم بالتعرف علي مکونات اكثر في الفصول 
القادمة ولكن من المهم اولا فهم الخصائص المشتركة بين مكونات الواجهات الرسومية . 

* صHiف Component‏ هو الصنف الاساسي لكل اصناف الواجهات الرسومية والحاويات 
وکل اصناف Wig‏ . 

* کل اصناف swig‏ ماعدا (چ0 اھ ل , Container‏ , frameل‏ ) عبارۃ عن اصناف فرعیة 
من الصiزڙک Jcomponent‏ 

* الشكل التالي يعرض عدد من الدوال الاكثر استخداما في الواجهات الرسومية للتحكم في 
الخصائص مثل الحجم والخط واللون و .... . 


The geî nid sei meîlhalê for heme dala 
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menê im Ibe DML diagraa Er bovis. 


Font; java. at Font س‎ 
=background: Java.ant, Color a4 
-forteiroutd: Java. aut Color 
=pgreferredSizê: java. awt.DimensTon 
-î sihe: boolean 

get idthEY: nk 

#gdtHeight Oz. Int 

+t: int EAA and ge YF rolen 1ha ermoirilinate o Ihc copa pens mls 
+ğetYO: Int ule Conf within 1t piret con gfifiefil. 


Thoefonl of his cımpaneiî, 

The Background cular of his biamifaniiênk 
The forçgrou ml colar of this qona poaic wl 
Tha prrférîêd arse ûl Iê cipal. 
Indicates wheiher ihişsam ponent ë visible, 
RHetums Ihe wklîh ıf [hrs compo mwenî 


Revirns lhe height Uf his itt fC. 


tad comp: Compan amponemt kl iı oom pmEAE bû Lh Cimî biii r. 


AS em preul be he roma mer with ihe specified inden 
Removes he cGumgpameni fhuani Thue contiifuér, 

Relums ibe liyul mi iaper for this cuntniner 

Sel the byouil anager For hik coniiimer. 

Pini cach Of Ie components in ih timiaimer 


Thee gU und so melhals Tir hese dain 
fields aro provided ln rhe elas, bill 
qmMied în lhe UML dingrum fot breil | 


The hao li iç Far thks camponeni FH life ply whCE 
ihe mûs: FHS gia Lhe curt pO wiht clicking, 


Thr harder for {hiš com pemêenl 


* الدالة ١٠×‏ مامه تقوم بعرض نص توضيحي عن عمل المكون الرسومي عن الاشارة اليه بواسطة 
الما 
وس. 


* يمكن انشاء حدود للمكونات عن طريق دوال التهئية التالية : 


add comp: CompOnNERTE, Tndex: Tint: Component 
+rêmove(conp: Componenti: wu d 

age tLayout O: LayoutManağer 

#setLavoit{l: LayoutHanagerî: void 
+palnttomponentslg: Lraphicsî: woid 


-tawlTipText: String 


-barder: juvas. sing. border Border 


new TitledBorder (String title); 
new LineBorder (Color color, 


TRE: WEGER YF 


مثال :- 

توضيح لاستخدام الخصائص في واجهة رسومية ؟؟؟ 
الحل 

شكل الواجهة المطلوب برمجتها باستخدام نفس الخصائص 


الكوووود :- 


1. AMPDOEE Java: awl; 
import javax.swing.*; 
import jJavax.swing.border.*; 


public class TestSwingCommonFeatures extends JFrame { 
public TestSwingCommonFeatures () { 


JPanel p1 = new JPanel (new FlowLayout (FlowLayout . LE 
JButton jbtlLeft = new JButton ("Left"); 

JButton jbtCenter = new JButton ("Center"); 

JButton jJbtERight = new JButton ("Right"); 
JbtlLeft.setBackground (Color.WHITE) ; 
JbtCenter.setForeground (Color. GREEN) ; 

OEE ORE SE EROL TIPLE ELIT S TS ERNE BISBEE BUCE EOD; 
pl1l.add(jbtLeft); 

pl1.add(jbtCenter) ; 

p1.add(jbtERight); 

pl1l.setBorder (new TitledBorder ("Three Buttons") ); 
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Font largeFont = new Font ("TimesRoman", Font.BOLD, 20); 
BOEQdErE lineBOordeE = New LINeBOEIeE (COlOE BLACK, 2); 


N N 
ل کا‎ 


JPanel p2 = new JPanel (new GridLayout (1, 2, 5, 5)); 
JLabel jlblRed = new JLabel ("Red"); 

Label jlblOrange = new JLlLabel ("Orange") ; 
lb1IRed.setForeground (Color.RED) ; 
l1lblOrange.setForeground (Color. ORANGE) ; 
l1lblRed.setFont (largeFont) ; 
1lblOrange.setFont (largeFont) ; 
lblRed.setBorder (lineBorder) ; 
jlblOrange.setBorder (lineBorder) ; 
p2.add(jlblRed) ; 
p2.add(jlblOrange) ; 
p2.setBorder (new TitledBorder ("Two Labels")); 


N 
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setLayout (new GridLayout (2, 1, 5, 5)); 
add (p1); 
add (p2); 


uNR vu Wu Ww N N N N‏ نتن یتین 
oa‏ کد O‏ فا ت د ت ی کل ی ي لک E a‏ 


} 


ہم ہہ کہ کم 
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JFrame frame = new TestSwingCommonFeatures () ; 
frame.setTitle ("TestSwingCommonFeatures") ; 
frame.setSize (300, 150); 
frame.setLlLocationRelativeTo (null); € 
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE 
frame.setVisible (true) ; 


* ملحوظة مهمة :- 


نفس الخاصية يمكن ان يكون لها قيم مختلفة في اماكن مختلفة › مثلا الخاصية ع|طأء¡۷ قيمتها الافتراضية 
في ٥۳هل‏ هي ءءاه۴ ولذلك لاظهار الاطار لابد من تحويلها الي عں٣].‏ 


اما في حالة باقي المکونات مثل ۸٥ں‏ طل تكون قيمة ءاطاوءا۷ الافتراضية عمں٣]‏ فلا داعي لتحويلها الي 
الي قيمة اخري . 


الصور 


Image Icons 


* في الجافا يتم استخدام الصنف ١٥٥۱ع‏ ع2" |.ع"اسء.×ه۷هز لتمثيل الايقونات في الواجهات ». 


* الايقونة هي عبارة عن صورة ذات حجم محدد وغالبا هي صغيرة الابعاد وتستخدم لتزيين المكونات 
الاخري . 


* نستخدم دالة التهئية التالية لانشاء ايقونة صورة : 
Imagelcon icon = new Imagelcon(filename);‏ 
حيث ان ه۳ ه٠‏ ء|ا؟ عبارة عن مسار الصورة التي نريد تحويلها الي ايقونة . 
ملحوظة مهمة :- 
تدعم الجافا 3 انواع من الصور ۴۱6 , 6١۴ , J٥۴6‏ واسماء الصور من هذه الثلاثة انواع تنتهي 


بالاختصارات التالية علي التريتب (ع,م. , ععمز. , ۴أع.) . واذا كانت الصورة التي تريد وضعها من 
نوع غير هذه الأنواع فيمكن استخدام برتامج الرسام لتحويلها الي هذه الأنواع. 


مثال : 


برنامج يعرض 4 ايقونات صور ؟؟ 


الكوود 


1 import javax.swing.*; 
import Jjava.awt.*; 


public class TestImagelcon extends JFrame { 
private ImagelIcon usIcon new Imagelcon ("image/us.gif"); 
private Imagelcon mylcon new Imagelcon ("image/my. jP9"); 
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private Imagelcon frlcon Tmağe lêo (IME Ge/ EE OLE; 
private Imagelcon ukIcon ImagelIcon ("image/uk.gif"); 


public TestImagelcon() { 
setLayout (new GridLayout (1, 


add (new JLabel (usIcon)); 
add (new JLabel (mylcon)); 
OS (MEN UEBUEE ON (CEE TCO) J 
add (new JButton (uklcon) ) 


۴ 


BUBBLE EACLE VOA MAIRCSEEINOTL AES) 4 
TestImagelcon frame = new TestImagelcon(); 
frame.setTitle ("TestImagelcon") ; 
frame.setLocationRelativeTo (null); 
frame.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE 
frame.setSize (200, 200) ; 
frame.setVisible (true); 


ملحوظة مهمة :- 


لا يمكن مشاركة احد المكونات بين عدد من اللوحات نسبة لان المكون يظهر في لوحة واااحدة فقط ›» 


يمكن مشاركة الحدود والايقونات بين المكونات المختلفة . 


Chapter Summary 
ملخص الفصل الاول‎ 


* كل حاوية تحتوي علي مدير تخطيط لتنظيم طريقة ترتيب المكونات في الحاوية حسب الاماكن المرغوبة 
٠‏ ومن امثلة المدراء البسيطيين FlowLayout , GridLayout , BorderLayout jlli,‏ . 


* يمكن استخدام اعم همل كحاوية فرعية للحصول علي الشكل المطلوب. 


* قم باستخدام الدالة للج لاضافة ال اعم ج( الي الاطار › وافتراضيا ان التخطيط الخاص باللوحة هو 
BorderLayout رlط¦ںly «< FlowLayout‏ . 


* یمکن التحكم في الوان مكونات الواجهة عن طريق الصنف java.awt.Color‏ عادة تتكون الالوان من 
مزج ثلاثة الوان خي الاحمر والاخضر والازرق وكل منها يمثل برقم من دون اشارة يترواح بين 0 و 
5 وهذا الظام هو ما يعرف |عdكهM R68‏ . 


Review Questions 


Review Questions 


Sections 12.3-12.4 


12.1 Which class is the root of the Java GUI component classes? Is a container class a 
subclass of Component ? Which class is the root of the Swing GUI component classes? 


12.2 Explain the difference between AWT GUI components, such as java.awt .Button, 
and Swing components, such as javax.swing.JButton. 


12.3 How do you create a frame? How do you set the size for a frame? How do you get the 
size of a frame? How do you add components to a frame? What would happen if the 
statements frame.setSize (400, 300) and frame.setvisible (true) were swapped 
in the MyFrameWithComponents class in Section 12.4.2, "Adding Components to a 
Frame"? 


Determine whether the following statements are true or false: 


You can add a button to a frame. 

You can add a frame to a panel. 

You can add a panel to a frame. 

You can add any number of components to a panel or a frame. 

You can derive a class from JButton, JPanel, JFrame, Of JApplet. 


12.5 The following program is supposed to display a button in a frame, but nothing is 
displayed. What is the problem? 
1 public class Test extends javax.swing.JFrame { 
pUBDLIS TEESE A 
add (new jJavax.swing.JButton ("OK")); 
} 


jJavax.swing.JFrame frame = new javax.swing.JFrame (); 
frame.setSize (100, 200); 
frame.setVisible (true); 


2 

3 

4 

5 

6 PUDLIE OEATLLE VOILA MAL (SEET LI AES) 4 
7 

8 

9 

0 } 

1 


12.6 Which of the following statements have syntax errors? 
Component c1 = new Component (); 


JComponent c2 new JComponent () ; 
Component c3 new JButton () ; 
JComponent c4 = new JButton (); 
Container c5 = new JButton (); 
c5.add (c4); 
Object c6 = 
C5 add:(ê6) ; 


new JButton () ; 


Section 12.5 Layout Managers 
12.7 Why do you need to use layout managers? What is the default layout manager for a 
frame? How do you add a component to a frame? 


12.8 Describe FlowLayout. How do you create a FlowLayout manager? How do you add a 
component to a FlowLayout container? Is there a limit to the number of components 
that can be added to a Flowlayout container? 


Describe Gridlayout. How do you create a GridLayout manager? How do you add a 
component to a GridlLayout container? Is there a limit to the number of components 
that can be added to a Gridlayout container? 


Describe Borderlayout. How do you create a BorderlLayout manager? How do you 


add a component to a BorderLayout container? Can you add multiple components in 
the same section? 


Sections 12.6-12.7 


12.11 How do you create a color? What is wrong about creating a Color using new 
Color (400, 200, 300)? Which of the following two colors are darker, new 
COLSE (LO. Up OF Or REW COLOE (AOU; O 2 


12.12 How do you create a font? How do you find all the available fonts on your system? 
Section 12.8 Using Panels as Subcontainers 
12.13 How do you create a panel with a specified layout manager? 


12.14 What is the default layout manager for a JPane1? How do you add a component to a 
JPanel? 


12.15 Can you use the setTit1e method in a panel? What is the purpose of using a panel? 


12.16 Since a GUI component class such as JButton is a subclass of Container, can you 
add components into a button? 


Sections 12.9-12.10 


12.17 How do you set background color, foreground color, font, and tool tip text on a Swing 


GUI component? Why is the tool tip text not displayed in the following code? 
import javax.swing.*; 


public class Test extends JFrame { 
private JButton jJbtOK = new JButton ("OK"); 


PUBDLLE SECTS TOLE, MaLR (SEET IL AFIS) 4 


1۸ 

2 

3 

4 

5 

6 

ا 1 1 7 

8 JFrame frame = new Tes 

9 rame.setTitle ("Logic 
10 frame.setSize6 (200; 100) ; 
1 

2 

3 

4 

5 

6 

7 

8 

9 


frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE 
frame.setVisible (true) ; 


public Test () { 
JBEOK.SOETOOLTIPTESE(TTRLS K5 8 SUEEONT); 
add (new IE UE EON "OK"D ; 


12.18 Show the output of the following code: 


import javax.swing.*; 


püblig elass Test { 
pUOLLE SCALE TOLA. MEALA (SEELATTL I AEITS): 
JButton jJbtOK = new JButton ("OK"); 
System.out.println (JbtOK.isVisible()); 


JFrame frame = new JFrame (); 
System.out.println (frame.isVisible()); 


12.19 How do you create an Imagercon from the file image/us.gif in the class directory? 


12.20 What happens if you add a button to a container several times, as shown below? Does 


it cause syntax errors? Does it cause runtime errors? 
JButton jbt = new JButton(); 

JPanel panel = new JPanel (); 
panel.add(jbt) ; 

panel.add( jbt) ; 


panel.add(jbt); 


12.21 Will the following code display three buttons? Will the buttons display the same icon? 
import javax.swing.*; 
import java.awt.*; 


public class Test extends JFrame { 

JIE SESE FOL MEALR(SEEIATT]. AFIS) 4 
frame = new Test (); 
.setTitle ("ButtonlIcons"); 
.setSize (200, 100); 
.setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE 
.SetVisible (true); 


lic Test() { 

ImageIcon usIcon = new Imagelcon ("image/uslIcon.gif"); 
JButton jJbt1 = new JButton (usIcon) ; 

JButton jJbt2 = new JButton (usIcon); 


JPanel p1 = new JPanel (); 
pl wad BEL) 


JPanel p2 = new JPanel (); 
P2 Add COBEZ J 


JPanel p3 = new JPanel (); 
Pa sadd (BEL; 


add (p1, BorderLlLayout .NORT 
add (p2, BorderLayout . SOUT 
add (p3, BorderLayout.CENTE 


Can a border or an icon be shared by GUI components? 


انتھی الفصل الاول بحمد الله ..... 


